<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>账号管理</BreadcrumbItem>
      <BreadcrumbItem>新增账号</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" inline>
      <FormItem>
        <Button type="default" @click="$router.go('-1')">返回</Button>
      </FormItem>
    </Form>
    <div class="form_box">
      <Form ref="formCustom" style="width: 850px;" :model="form" :label-width="120">
        <FormItem label="账户名:">
          <Input type="text"  placeholder="请输入账号名"></Input>
        </FormItem>
        <FormItem label="邮箱:">
          <Input type="email"  placeholder="请输入邮箱"></Input>
        </FormItem>
        <FormItem label="账户密码:">
          <Input type="password"  placeholder="请输入用户密码"></Input>
        </FormItem>
        <FormItem label="用户状态:">
          <Input type="text"   style="width:120px;" placeholder="请输入用户状态"></Input>
        </FormItem>
        <FormItem label="设置角色:">
          <Select  placeholder="请选择" style="width: 120px;"  >
            <Option value="0">管理员</Option>
            <Option value="1">经理</Option>
          </Select>
        </FormItem>
        <h3 style="width: 100px;text-align: right;margin-bottom: 24px;">权限设置</h3>
        <FormItem label="角色:">
          <RadioGroup v-model="selectData" vertical @on-change="changeSelect">
            <Radio :label="item.id" v-for="(item,index) in list" :key="index">
              {{item.title}}
            </Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="选择经理" v-if="my_role_id !=6 && role_id == 7">
          <Select  placeholder="请选择" style="width: 120px;" v-model="form.manager_id" >
            <Option  :value="item.id" v-for="(item,index) in accountList" :key="index">{{item.username}}</Option>
          </Select>
        </FormItem>
        <FormItem label="权限预览" v-if="selectData!=''">

          <CheckboxGroup v-model="list_">
            <div v-for="(item , index) in data" :key="index" class="outer">
              <div class="checkboxs">
                <Checkbox :label="item.id" disabled border>{{item.title}}</Checkbox>
              </div>
              <div v-if="item.child.length != 0" class="subordinate">
                <div v-for="(item , index) in item.child" :key="index">
                  <Checkbox class="checkbox" disabled :label="item.id" border>{{item.title}}</Checkbox>
                  <Checkbox v-for="(i , idx) in item.children"  disabled  :key="idx" :label="i.id" class="check"
                            border>{{i.title}}</Checkbox>
                </div>
              </div>
            </div>
          </CheckboxGroup>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="Submit">确定</Button>&nbsp;&nbsp;&nbsp;&nbsp;
          <Button type="default" @click="$router.go('-1')">取消</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          username:'',
          password:'',
          role_id:null,
          manager_id:null,//经理id 经理角色账号时 不填
          email:'',//邮箱
        },
        selectData: null, // 权限组选中下标
        selectList: [], //权限预览id
        show: true,

        list_: [],

        list: [],
        roleList:[],

        checkAll: true,
        role_id:null,
        data:[],
        accountList:[],


        my_role_id:null, //6经理
      };
    },
    created() {
      // this.m_id = JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id

      this.my_role_id = JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id;
      console.log(this.my_role_id)
    },
    methods: {
      getAccount(){ //获取所有经理
        this.axios.post("device/getAccount").then(res => {
          if (res.code == 1) {
            this.accountList = res.data;
          }
        });
      },
      all() {
        this.axios.post("role/rule_list").then(res => {
          if (res.code == 1) {
            var arr = res.data;
            this.data = arr;

          }
        });
      },

      Submit() {
        var form = this.form;
        form.role_id = this.role_id
        // var id =  JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id;

        // if(id == 6){
        // 	//经理不需要写经理id
        // }else{
        // 	// form.manager_id = id;
        // }

        // if(!this.$testEmail(form.email)){
        // 	this.$Message.warning('请填写正确的邮箱');
        // 	return false
        // }


        console.log(form)

        this.axios.post('account/addAccount',form ).then(res => {
          if(res.code == 1){
            this.$Message.success('添加成功');
            this.$router.go(-1)
          }
        })

      },

      getlist() {

        //如果是经理只能添加操作员

        this.axios.post("role/role_list",{status:1}).then(res => {
          if (res.code == 1) {
            if(this.my_role_id == 6){
              this.role_id = 7;
              this.list =[];

              var arr = res.data.list;

              for(var i = 0,len=arr.length;i<len;i++){
                if(arr[i].id == 7){
                  this.list .push(arr[i]);
                  break
                }
              }
            }else{
              this.list = res.data.list;
              this.role_id =this.list[0].id;
              console.log(this.selectData )

            }

            this.selectData = this.list[0].id;


            this.getRole();
          }
        });
      },

      getRole(){
        this.axios.post("role/get_role_rule",{role_id:this.role_id}).then(res => {
          if(res.code == 1){
            this.list_  = res.data;
            console.log(this.list_)
          }
        })
      },
      changeSelect(e) {
        console.log('选择', e)
        this.show = false;
        this.$nextTick(() => {
          this.show = true
        })
        this.role_id = e;
        this.getRole();
      },



    }

  };
</script>

<style scoped>
  h3 {
    line-height: 50px;
  }

  .subordinate {
    margin: 10px 20px;
  }

  .checkbox {
    margin: 5px 10px;
    min-width: 200px;
  }

  .check {
    margin-top: 5px;
    margin-left: 30px;
    min-width: 160px;
  }

  .checkboxs {
    border-bottom: 1px solid silver;
    padding-bottom: 10px;
  }

  .outer {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid silver;
    border-radius: 5px;
  }
</style>
